import type { SystemUserItem } from "@/api/services/systemUserService";
import systemUserService from "@/api/services/systemUserService";
import { Form, Input, Modal, Select, message } from "antd";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

interface UserModalProps {
	open: boolean;
	user: SystemUserItem | null;
	onSuccess: () => void;
	onCancel: () => void;
}

const UserModal = ({ open, user, onSuccess, onCancel }: UserModalProps) => {
	const { t } = useTranslation();
	const [form] = Form.useForm();
	const isEdit = !!user;

	useEffect(() => {
		if (open && user) {
			form.setFieldsValue({
				...user,
				role_id: user.role.id,
			});
		} else {
			form.resetFields();
		}
	}, [open, user, form]);

	const handleOk = async () => {
		try {
			const values = await form.validateFields();
			if (isEdit) {
				await systemUserService.userEdit({
					id: user.id,
					...values,
				});
				message.success(t("common.editSuccess"));
			} else {
				await systemUserService.userAdd(values);
				message.success(t("common.addSuccess"));
			}
			onSuccess();
		} catch (error) {
			message.error(isEdit ? t("common.editError") : t("common.addError"));
		}
	};

	return (
		<Modal
			title={isEdit ? t("common.edit") : t("common.add")}
			open={open}
			onOk={handleOk}
			onCancel={onCancel}
			destroyOnClose
		>
			<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
				<Form.Item
					name="username"
					label={t("system.user.username")}
					rules={[
						{ required: true, message: t("system.user.usernameRequire") },
						{ min: 3, message: t("system.user.usernameLength") },
					]}
				>
					<Input
						disabled={isEdit}
						placeholder={t("system.user.usernamePlaceholder")}
					/>
				</Form.Item>

				{!isEdit && (
					<Form.Item
						name="password"
						label={t("system.user.password")}
						rules={[
							{ required: true, message: t("system.user.passwordRequire") },
							{ min: 6, message: t("system.user.passwordLength") },
						]}
					>
						<Input.Password
							placeholder={t("system.user.passwordPlaceholder")}
						/>
					</Form.Item>
				)}

				<Form.Item
					name="nickname"
					label={t("system.user.nickname")}
					rules={[
						{ required: true, message: t("system.user.nicknameRequire") },
					]}
				>
					<Input placeholder={t("system.user.nicknamePlaceholder")} />
				</Form.Item>

				<Form.Item
					name="email"
					label={t("system.user.email")}
					rules={[
						{ required: true, message: t("system.user.emailRequire") },
						{ type: "email", message: t("system.user.emailFormat") },
					]}
				>
					<Input placeholder={t("system.user.emailPlaceholder")} />
				</Form.Item>

				<Form.Item
					name="mobile"
					label={t("system.user.mobile")}
					rules={[
						{ required: true, message: t("system.user.mobileRequire") },
						{
							pattern: /^1[3-9]\d{9}$/,
							message: t("system.user.mobileFormat"),
						},
					]}
				>
					<Input placeholder={t("system.user.mobilePlaceholder")} />
				</Form.Item>

				<Form.Item name="avatar" label={t("system.user.avatar")}>
					<Input placeholder={t("system.user.avatarPlaceholder")} />
				</Form.Item>

				<Form.Item
					name="role_id"
					label={t("system.user.role")}
					rules={[{ required: true, message: t("system.user.roleRequire") }]}
				>
					<Select
						placeholder={t("system.user.rolePlaceholder")}
						options={[
							{ label: t("system.user.roleAdmin"), value: 1 },
							{ label: t("system.user.roleUser"), value: 2 },
						]}
					/>
				</Form.Item>

				<Form.Item
					name="status"
					label={t("system.user.status")}
					rules={[{ required: true, message: t("system.user.statusRequire") }]}
				>
					<Select
						placeholder={t("system.user.statusPlaceholder")}
						options={[
							{ label: t("common.enable"), value: 1 },
							{ label: t("common.disable"), value: 0 },
						]}
					/>
				</Form.Item>
			</Form>
		</Modal>
	);
};

export default UserModal;
